<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .div1 {
      height: 50px;
      background-color: rgb(205, 199, 199);
    }

    .div1 a {
      display: inline-block;
      height: 50px;
      width: 90px;
      color: black;
      text-decoration: none;
      line-height: 50px;
      text-align: center;
      font-size: 15px;
    }

    .a1 {
      background-color: rgb(43, 42, 42);
      transform: skewX(-25deg);
    }

    .div1 a:hover {
      background-color: #ff6700;
    }

    .div2 {
      width: 280px;
      height: 630px;
      background-color: rgb(61, 59, 59);
      display: inline-block;
    }

    .span1 {
      width: 250px;
      height: 220px;
      display: inline-block;
      background-color: rgb(150, 147, 147);
      margin-left: 30px;
      margin-top: 20px;
    }

    .span1 img {
      width: 150px;
      height: 150px;
      margin-left: 50px;
      margin-top: 35px;
      border-radius: 200px;
    }

    .span2 {
      width: 250px;
      height: 30px;
      display: inline-block;
      background-color: rgb(29, 28, 34);
      margin-left: 30px;
      text-indent: 2em;
      line-height: 30px;
      color: white;
    }
    .span3{
      width: 250px;
      height: 150px;
      display: inline-block;
      background-color: rgb(150, 147, 147);
      margin-left: 30px;
    }
    .span4{
      width: 250px;
      height: 150px;
      display: inline-block;
      background-color: rgb(150, 147, 147);
      margin-left: 30px;
    }
    .span4 ul{
      font-size: 12px;
      padding-left: 30px;
      margin-top: 20px;
    }
    .span5{
      width: 1000px;
      height: 600px;
      display: inline-block;
      background-color: white;
      margin-left: -5px;
      margin-top: 20px;
    }
    .span5 .span6{
      height: 43px;
      width: 1000px;
      font-size: 20px;
      display: inline-block;
      
    }
    .span6 img{
      margin-top: 10px;
      margin-left: 50px;
    }
    .span5 p{
      font-size: 17px;
      text-indent: 4em;
      margin-left: 50px;
      line-height: 2;
    }
    .img1{
      margin-left: 325px;
    }

    .div10{
      background-color: rgb(62, 60, 60);
    }
    .div8{
      height: 80px;
      background-color: rgb(32, 32, 32);
      text-align: center;
      line-height: 40px;
      color: white;
    }
  </style>
</head>

<body>
  <div class="div1">
    <ul style="list-style: none">
      <li>
        <a href="" class="a1" style="color: white;">网站首页</a>
        <a href="">我的爱好</a>
        <a href="">我的大学</a>
        <a href="">班级相册</a>
        <a href="">我的梦想</a>
        <a href="">我的博客</a>
        <a href="">关于我</a>
      </li>
    </ul>
  </div>

  <div class="div10">

  <div class="div2">
    <span class="span1">
      <img src="D:\HTMLCode\实验\实验六\实验六图片\photo.jpg" alt="" />
    </span>
    <span class="span2">最新照片</span>
    <span class="span3">
      <img src="D:\HTMLCode\实验\实验六\实验六图片\01.jpg" alt="" style="margin-left: 15px; margin-top: 15px;"/>
      <img src="D:\HTMLCode\实验\实验六\实验六图片\02.jpg" alt="" />
      <img src="D:\HTMLCode\实验\实验六\实验六图片\03.jpg" alt="" />
      <img src="D:\HTMLCode\实验\实验六\实验六图片\04.jpg" alt="" /><br>
      <img src="D:\HTMLCode\实验\实验六\实验六图片\05.jpg" alt="" style="margin-left: 15px;"/>
      <img src="D:\HTMLCode\实验\实验六\实验六图片\06.jpg" alt="" />
      <img src="D:\HTMLCode\实验\实验六\实验六图片\07.jpg" alt="" />
      <img src="D:\HTMLCode\实验\实验六\实验六图片\08.jpg" alt="" />
    </span>
    <span class="span2">小调查</span>
    <span class="span4">
        <ul style="list-style: none;">
          请选择你喜欢的运动:
          <li><input type="checkbox">篮球</li>
          <li><input type="checkbox">足球</li>
          <li><input type="checkbox">网球</li>
          <input type="submit">
        </ul>
    </span>
  </div>
  <span class="span5">
    <span class="span6"><img src="D:\HTMLCode\实验\实验六\实验六图片\titlebg.png" alt="">
      《当你老了》————叶芝</span>
      <hr>
      <p>当年华已逝，你两鬓斑白，沉沉欲睡，坐在炉边慢慢打盹，请取下我的这本诗集，请缓缓读 <br> 起，如梦一般，你会重温，你那脉脉眼波，他们曾经是那样的深情和柔美</p>
      <p>多少人曾爱过你容光焕发的楚楚魅力，爱你的倾城容颜，或是真心，或是做戏，但只有一个 <br> 人！他爱的是你圣洁虔诚的心当你洗尽铅华，伤逝红颜的老去，他也依然深爱着你！</p>
    <img src="D:\HTMLCode\实验\实验六\实验六图片\text0211.jpg" alt="" class="img1">
    <p>炉边的火焰温暖明亮，你轻轻地低下头去，带着淡淡的凄然，为了枯萎熄灭的爱情，喃喃低语， <br> 此时他正在千山万壑之间独自游荡，在哪满天凝视你的繁星后面隐起了脸庞。</p>
  </span>

  </div>
  <div class="div8">
    联系我们|网站首页|管理后台|<br>
    <span style="color: white;">版权所有</span>
  </div>
</body>

</html>